<template>
  <div>
    <div class="demo-inner-divider">基本多选框</div>
    <div class="checkbox">
      <div>
        <p>默认</p>
        <e-checkbox
          label="默认"
          v-model="boxData"
        >默认</e-checkbox>
      </div>
      <div>
        <p>选中、全选</p>
        <e-checkbox
          label="选中、全选"
          v-model="single">选中、全选</e-checkbox>
      </div>
      <div>
        <p>部分选中</p>
        <e-checkbox
          label="部分选中"
          indeterminate
        > </e-checkbox>
      </div>
      <div>
        <p>不可选</p>
        <e-checkbox
          label="不可选"
          disabled> </e-checkbox>
      </div>
      <div>
        <p>默认选中、全选</p>
        <e-checkbox
          label="默认选中、全选"
          v-model="single"
          disabled> </e-checkbox>
      </div>
      <div>
        <p>部分默认选中</p>
        <e-checkbox
          label="默认选中、全选"
          indeterminate
          disabled> </e-checkbox>
      </div>
    </div>
    <div class="demo-inner-divider">checkbox自定义true-value、false-value</div>
    <div class="checkbox">
      <div>
        <p>true-value、false-value</p>
        <e-checkbox label="苹果" :true-value="1" :false-value="0" @on-change="onChange" size="large" v-model="trueValue"></e-checkbox>
      </div>
    </div>
    <div class="demo-inner-divider">成组的多选框组</div>
    <div class="checkbox">
      <div>
        <p>checkbox组</p>
        <e-checkbox
          :indeterminate="indeterminateFruit"
          v-model="checkAllFruit"
          @click.prevent="handleCheckAllFruit"
        >
          全选
        </e-checkbox>
        <e-checkbox-group
          v-model="checkAllGroupFruit"
          @on-change="checkAllGroupChangeFruit"
        >
          <e-checkbox :label="1">选项一</e-checkbox>
          <e-checkbox :label="2">选项二</e-checkbox>
          <e-checkbox :label="3">选项三</e-checkbox>
          <e-checkbox :label="4">选项四 </e-checkbox>
        </e-checkbox-group>
      </div>
    </div>
    <div class="demo-inner-divider">多选框尺寸</div>
    <div class="checkbox">
      <div>
        <span>默认: </span>
        <e-checkbox-group
          v-model="checkAllGroup"
          @on-change="checkAllGroupChange"
          type="button"
          size="base"
        >
          <e-checkbox
            :indeterminate="indeterminate"
            v-model="checkAll"
            @click.prevent="handleCheckAll"
            label="全部"
          >
          </e-checkbox>
          <e-checkbox label="审批中"></e-checkbox>
          <e-checkbox label="已通过" disabled></e-checkbox>
          <e-checkbox label="未通过"> </e-checkbox>
          <e-checkbox label="已撤回"></e-checkbox>
        </e-checkbox-group>
      </div>
    </div>
    <div class="checkbox">
      <div>
        <span>中: </span>
        <e-checkbox-group
          v-model="checkAllGroup"
          @on-change="checkAllGroupChange"
          size="middle"
          type="button"
        >
          <e-checkbox
            label="全部"
            v-model="checkAll"
            @click.prevent="handleCheckAll"
          >
          </e-checkbox>
          <e-checkbox label="审批中"></e-checkbox>
          <e-checkbox label="已通过" disabled></e-checkbox>
          <e-checkbox label="未通过"> </e-checkbox>
          <e-checkbox label="已撤回"></e-checkbox>
        </e-checkbox-group>
      </div>
    </div>
    <div class="checkbox">
      <div>
        <span>小: </span>
        <e-checkbox-group
          v-model="checkAllGroup"
          @on-change="checkAllGroupChange"
          type="button"
          size="small"
        >
          <e-checkbox
            label="全部"
            v-model="checkAll"
            @click.prevent="handleCheckAll"
          >
          </e-checkbox>
          <e-checkbox label="审批中"></e-checkbox>
          <e-checkbox label="已通过" disabled></e-checkbox>
          <e-checkbox label="未通过"> </e-checkbox>
          <e-checkbox label="已撤回"></e-checkbox>
        </e-checkbox-group>
      </div>
    </div>
    <checkbox-md class="markdown-body"></checkbox-md>
  </div>
</template>
<script>
import checkboxMd from '../../docs/checkbox.md'
export default {
  name: 'DemoCheckboxAndRadio',
  components: {
    checkboxMd,
  },
  data() {
    return {
      boxData: false,
      single: true,
      controlChecked: false,
      disabled: false,
      trueValue:1,
      disabledSingle: true,
      indeterminate: false,
      checkAll: false,
      checkAllGroup: ['审批中', '已通过'],
      checkAllGroupFruit: [1],
      checkAllFruit: false,
    }
  },
  computed:{
    indeterminateFruit(){
      if(this.checkAllGroupFruit.length===4) {
        return false
      } else{
        return !!this.checkAllGroupFruit.length
      }
    },
  },
  methods: {
    handleCheckAll() {
      if (this.indeterminate) {
        this.checkAll = false
      } else {
        this.checkAll = !this.checkAll
      }
      this.indeterminate = false

      if (this.checkAll) {
        this.checkAllGroup = ['全部', '已通过', '审批中', '未通过', '已撤回']
      } else {
        this.checkAllGroup = []
      }
    },
    checkAllGroupChange(data) {
      if (data.length === 4) {
        this.indeterminate = false
        this.checkAll = true
      } else if (data.length > 0) {
        this.indeterminate = false
        this.checkAll = false
      } else {
        this.indeterminate = true
        this.checkAll = false
      }
    },
    handleCheckAllFruit() {
      if(this.indeterminateFruit) {
        this.checkAllFruit = false
      }else{
        this.checkAllFruit = !this.checkAllFruit
      }
      if (this.checkAllFruit) {
        this.checkAllGroupFruit = [1,2,3,4]
      } else {
        this.checkAllGroupFruit = []
      }
    },
    checkAllGroupChangeFruit(data) {
      if (data.length === 4) {
        this.checkAllFruit = true
      } else if (data.length > 0) {
        this.checkAllFruit = false
      } else {
        this.checkAllFruit = false
      }
    },
    onChange(val) {
      console.log('通过true-value、false-value修改值', val)
    },
  },
}
</script>
<style scoped>
.checkbox {
  display: flex;
  flex-direction: row;
  margin-bottom: 60px;
}
.checkbox > div {
  margin-right: 50px;
}
.checkbox p {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: rgba(98, 54, 255, 1);
  margin-bottom: 10px;
}
</style>
